<template>
  <nut-tabbar v-model="activeName" @tab-switch="tabSwitch">
    <nut-tabbar-item
        v-for="item in List"
        :name="item.name"
        :key="item.name"
        :tab-title="item.title"
        :icon="item.icon"
    />
  </nut-tabbar>
  <component
      :is="tab"
  />
</template>
<script lang="ts" setup>
import {Home, Order} from "@nutui/icons-vue";
import {computed, h, ref, watch} from "vue";
import ImportInfo from "./main/ImportProduct.vue";
import SaleInfo from "./main/SaleInfo.vue";

const activeName = ref('import')
const tab = ref(ImportInfo)

watch(()=> activeName.value, (newVal)=> {
  if (!newVal) return
  tab.value = List.value.find((item: any) => item.name === newVal)?.component
})
 const List = computed(()=> [
   {
     title: '商品录入',
     icon: h(Home),
     name: 'import',
     component: ImportInfo,
   },
   {
     title: '销售记录',
     icon: h(Order),
     name: 'sale',
     component: SaleInfo,
   },
 ])

  const tabSwitch = (_, name: string) => {
    activeName.value = name
  }
</script>
<style scoped lang="scss">

</style>